<template>

  <el-row>
    <h1>微信群小程序后台</h1>
    <el-col :span="4" > <br></el-col>

    <el-col :span="16" class="content-view">

      <p>群名称</p>
      <el-input v-model="groupName" placeholder="请输入内容"></el-input>

      <p>群介绍</p>
      <el-input v-model="groupDetails" placeholder="请输入内容"></el-input>

      <p>群地址(附近的人)</p>
      <el-input v-model="groupAdd" placeholder="请输入内容"></el-input>

      <p>群主微信</p>
      <el-input v-model="groupWx" placeholder="请输入内容"></el-input>

      <p>群头像</p>
      <p>http://pdqnh882x.bkt.clouddn.com/icon_sh_w.png</p>
      <p>http://pdqnh882x.bkt.clouddn.com/icon_yd_w.png</p>
      <p>http://pdqnh882x.bkt.clouddn.com/icon_jy_w.png</p>
      <el-input v-model="groupHeadImg" placeholder="请输入内容"></el-input>

      <p>群标签</p>
      <el-checkbox-group v-model="groupTags">
        <el-checkbox label="游戏"></el-checkbox>
        <el-checkbox label="运动"></el-checkbox>
        <el-checkbox label="生活"></el-checkbox>
      </el-checkbox-group>
      <!--<div id="qrcode"></div>-->

      <input @change="fileImage" type="file" accept="image/jpeg,image/x-png,image/gif"  value="" />
      <p>Message: {{ groupQR }}</p>
      <el-button v-on:click="clickGroupUpDate" type="primary" plain>提交</el-button>
    </el-col>
    <el-col :span="4" > <br></el-col>
  </el-row>



</template>

<script>

  import { getApplinziISaveGroupInfo  } from '../../api/httpApi'

    export default {
        name: "group",

      data() {
        return {
          groupName: '',
          groupDetails: '',
          groupAdd: '',
          groupWx:"",
          groupHeadImg:"",
          groupTags:[],
          groupQR:'',
          imageUrl: ''
        }
      },
      created() {
        // 初始化
        console.log("created");

      },
      mounted() {
        // 延迟方法
        console.log("mounted");
        //this.getModelContent()
        // new QRCode(document.getElementById("qrcode"), "https//blog.csdn.net/crper");
      },
      beforeUpdate() {
        // 事件变化前
        console.log("beforeUpdate");
      },
      updated() {
        // 事件变化
        console.log("updated");
      },
      beforeDestory() {
        // 销毁
        console.log("beforeDestory");
      },
      methods: {
        changeRadioVual(){
          this.outputTextareaS = ""
          console.log(this.radio);
        },
        // 方法
        getModelContent() {

        },
        clickGroupUpDate(){

          var data = {
            "groupName": this.groupName,
            "groupDetails": this.groupDetails,
            "groupAdd": this.groupAdd,
            "groupWx": this.groupWx,
            "groupHeadImg": this.groupHeadImg,
            "groupTags": this.groupTags,
            "groupQR": this.groupQR,
            "groupId": this.groupName+this.groupWx,
          }
          getApplinziISaveGroupInfo(data).then((res)=>{
            if (res.data.code === 0){
                this.$message('成功');
                this.groupName = '';
                this.groupDetails = '';
                this.groupAdd = '';
                this.groupWx = '';
                this.groupHeadImg ='';
                this.groupTags =[];
                this.groupQR ='';
            }else{
              this.$message('失败');
            }
          })
        },
        fileImage:function(e) {
          var that = this;
          var file = e.target.files[0];
          console.log(file);
          let getObjectURL = function(file){
            let url = null ;
            if (window.createObjectURL!=undefined) { // basic
              url = window.createObjectURL(file) ;
            } else if (window.URL!=undefined) { // mozilla(firefox)
              url = window.URL.createObjectURL(file) ;
            } else if (window.webkitURL!=undefined) { // webkit or chrome
              url = window.webkitURL.createObjectURL(file) ;
            }
            return url ;
          }

          var url = getObjectURL(file);
          qrcode.decode(url);
          qrcode.callback = function(imgMsg){
            console.log(imgMsg);
            that.groupQR = imgMsg
          }

        }
      }

    }
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .createBtn{
    width: 16%;
    align-content: center;
    text-align: center;
    margin-top: 320px;

  }
  h1{
    text-align: center;
    color: #333333;
    font-size: 2rem;
    margin-bottom: 20px;
  }
  .content-view{
    text-align: center;
  }

  p{
    margin-bottom: 10px;
    margin-top: 10px;
  }
  input{
    margin-bottom: 10px;
    margin-top: 10px;
  }
</style>
